import React, { Component } from 'react';

class SelectSon extends Component {
  
  componentDidMount() {

  }

  state = {
    selectOptionSon: '',
  }

  selectSon = e => {
    // console.log(e.target.value)
    this.setState({
      selectOptionSon: e.target.value
    })
    this.props.brotherToSister(e.target.value)
  }

  render() {

    const ownOptions = [
      {i: 1, val: 'son1'},
      {i: 2, val: 'son2'},
      {i: 3, val: 'son3'},
    ]

    return (
      <div>
        <div>
          <select onChange={(e) => this.selectSon(e)} value={this.state.selectOptionSon}>
            {
              ownOptions.map( (v,i) => 
                <option value={v.val} key={v.i}>{v.val}</option>
              )
            }
          </select>    
          <div>
          <p>son - res: {this.state.selectOptionSon} </p>
          <p> toSon - res: {this.props.toSon}</p>  {/* 父传子props */}
          <p>(daughter -> parent) toSon - res: {this.props.daughterToSon}</p>  {/* 父传子props */}          
          </div>      
        </div>
      </div>
    )
  }
}

export default SelectSon;